<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{margin: 0;}
        #app{
            display: flex;
            flex-flow:row wrap;
            justify-content:space-around;
            align-content:space-around;
            height: 5rem;
        }
        .border-solid{
            border: 1px solid;
        }
        .item{
            height: 2rem;
            width: 2rem;
            font-size: 0.14rem;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 物理像素(设备像素) 单位：dp -->
    <!-- 设备独立像素dip: window.screen.width -->
    <!-- 设备像素比dpr: window.devicePixelRatio -->
    <!-- 举例：已知iPhone 7 plus 横向物理像素1080，设备独立像素414，设备像素比是3 -->
    <!-- 实际缩放比 scale = dp/(dip * dpr) -->
    <!-- 当scale==1 ==> dpr = dp/dip -->
    <!-- scale = 1080/(414 * 3) 约 = 0.8695652173913043 -->

    <!-- 视觉视口： 视觉视口 == dip -->
    <!-- 布局视口： document.documentElement.clientWidth == dip/initial-scale 就是设计稿的宽度-->
    <!-- 理想视口： 布局视口宽度/视觉视口宽度 == 1 可以这样实现==><meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <!-- initial-scale == dip/布局视口 -->

    <div id="app">
        <div class="border-solid item">你好</div>
        <div class="border-solid item">你好2</div>
        <div class="border-solid item">你好3</div>
        <div class="border-solid item">你好4</div>
        <div class="border-solid item">你好5</div>
        <div class="border-solid item">你好6</div>
    </div>
    <script>

        /**
         * 移动端适配方案总体上就2种
         * 一、让布局视口宽度 = 1/dpr 通过改变initial-scale值
         * 二、始终设置布局视口为理想视口，即不去改变布局宽度。而是去改元素在不同设备下的比例宽度
        */

        /**
         * 不缩放布局宽度，通过dpr缩放元素宽度的实现方案
         * 前提：<meta name="viewport" content="width=device-width, initial-scale=1.0">
         * 设计稿宽度750,假设html根字体大小是100px
         * 那么布局视口是375 html根字体大小？ ==> 750/100 = 375/x ===>x = 100 * (375/750) = 50px
         * 设计稿一个div宽200 ,那么200/100 = 2rem,那么在布局视口是375，div宽度为？
         * 200/100 = y/x => 2rem = y/50 ==>y= 100px
        */
        ;(function(win,doc){
            let flexible = {
                resizeEvt:'orientationchange' in window ? 'orientationchange' : 'resize'
            };
            flexible.setRootFontSize = function(layoutWidth){
                //浅拷贝
                Object.assign(flexible,{
                    layoutWidth:layoutWidth
                    ,dpr:win.devicePixelRatio
                    ,fontSize:100 * (layoutWidth / 750)
                })
                document.documentElement.style.fontSize = flexible.fontSize +'px'
            }
            flexible.px2rem = function(px){
                return px/flexible.fontSize;
            }
            flexible.ready = function(){
                let _self = this,layoutWidth = doc.documentElement.clientWidth;
                doc.addEventListener('DOMContentLoaded',function(){
                    _self.setRootFontSize(layoutWidth)
                });
                win.addEventListener(_self.resizeEvt,function(){
                    _self.setRootFontSize(doc.documentElement.clientWidth)
                })
                _self.setRootFontSize(layoutWidth)
            }.call(flexible);
        })(window,document)    
    </script>
    <!-- <script src="./test.js"></script> -->
</body>
</html>